<div style="margin-bottom: 5px;" nz-row nzType="flex">
  <!--<div class="btn-group" style="margin-top: 3px;">-->
  <!--<div class="btn btn-default" *ngFor="let timeData of timeDataArr" [class.active] = 'timeData.dataType === timeDataType' (click)="timeDataChange(timeData.dataType)">{{timeData.name}}</div>-->
  <!--</div>-->
  <nz-button-group>
    <button nz-button [nzType]="'primary'"  *ngFor="let timeData of timeDataArr" [nzGhost]="timeData.dataType !== timeDataType" nzSize="large" (click)="timeDataChange(timeData.dataType)">
      <span>{{timeData.name}}</span>
    </button>
  </nz-button-group>
  <div style="display: inline-block;margin:0 10px 10px;">
    <label>站点：</label>
    <!--[(ngModel)]="selectedOption"-->
    <nz-select style="min-width: 120px;" [(ngModel)]="rangeCode" nzSize="large"  (nzOpenChange) = 'changeSite($event)'>
      <nz-option nzLabel="--请选择站点--" nzValue=""></nz-option>
      <nz-option
        *ngFor="let site of siteArr"
        [nzLabel]="site.SITENAME"
        [nzValue]="site.RANGECODE"
      >
      </nz-option>
    </nz-select>
  </div>
  <div style="margin-right: 10px;">
    <div style="display: inline-block;">
      <label>开始时间：</label>
      <!--(ngModelChange)="_startDate=$event;_startValueChange()" [ngModel]="_startDate" [nzDisabledDate]="_disabledStartDate" nzShowTime [nzFormat]="'YYYY-MM-DD HH:mm:ss'" [nzPlaceHolder]="'Start date'"-->
      <nz-datepicker
        style="width: 228px;" nzSize="large"
        (ngModelChange)="startDate=$event;startValueChange()"
        [ngModel]="startDate"
        [nzDisabledDate]="disabledStartDate"
        [nzShowTime] = 'showTimeParams'
        [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
        [nzPlaceHolder]="'开始时间'"></nz-datepicker>
    </div>
    <div style="display: inline-block;margin-right: 10px">
      <label>结束时间：</label>
      <nz-datepicker
        style="width: 228px;" nzSize="large"
        (ngModelChange)="endDate=$event;endValueChange()"
        [ngModel]="endDate"
        [nzDisabledDate]="disabledEndDate"
        [nzShowTime] = 'showTimeParams'
        [nzFormat]='timeDataType == "hourData"? "YYYY-MM-DD HH:00" : "YYYY-MM-DD"'
        [nzPlaceHolder]="'结束时间'"></nz-datepicker>
    </div>
  </div>
  <button nz-button [nzType]="'primary'" nzSize="large" (click)="search()">
    <span>查询</span>
  </button>
  <button nz-button [nzType]="'primary'" nzSize="large" style="margin-left: 10px;" (click)="exportExcel()">
    <span>导出Excel</span>
  </button>
</div>
<div>
  <ul class="list-inline" style="color: #999;" *ngIf="tempHumData.hasOwnProperty('monitorTime')">
    <li>实时温湿度</li>
    <li *ngIf="tempHumData.hasOwnProperty('monitorTime')">监测时间：<span>{{tempHumData.monitorTime}}</span></li>
    <li *ngIf="tempHumData.hasOwnProperty('temperature')">温度：<span
      [style.color]="(tempHumData.temperature < 20 || tempHumData.temperature > 30) ? '#ce2504' : '#333'"
      [style.opacity]="(tempHumData.temperature < 20 || tempHumData.temperature > 30) ? '0.85' : '1'">
      {{tempHumData.temperature}}</span></li>
    <li *ngIf="tempHumData.hasOwnProperty('humidity')">湿度：<span
      [style.color]="tempHumData.humidity > 60 ? '#ce2504' : '#333'"
    >{{tempHumData.humidity}}</span></li>
  </ul>
</div>

<!-- 操作栏-->
<div id="one_operation_airfactor" data-role="one-operation"  class="one-operation"></div>

<!-- table栏 -->
<div class="one-table-area">
  <table id="one_table_airfactor"></table>
</div>
